<template>
  <div
      class="window_prompt_box"
      :style="{'background-color':promptBoxColor}"
      v-if="promptBoxShow">{{promptBoxInfo}}</div>
  <el-button class="returnBtn" type="primary" size="default" icon="Back" plain @click="back">返回</el-button>
  <div class="mainBox">
    <div class="imgBox">
      <img :src="pet.url" width="500"/>
    </div>
    <div class="textBox">
      <div class="typeBox infoBox">
        <p class="tips">类别:</p>
        <input class="input" v-model=pet.type disabled="true"/>
      </div>
      <div class="specificBox infoBox">
        <p class="tips">品种:</p>
        <input class="input" v-model=pet.good_specific disabled="true"/>
      </div>
      <div class="nameBox infoBox">
        <p class="tips">编号:</p>
        <input class="input" v-model=pet.name disabled="true"/>
      </div>
      <div class="priceBox infoBox">
        <p class="tips">价格:</p>
        <input class="input" v-model=pet.price disabled="true"/>
      </div>
      <div class="numberBox infoBox">
        <p class="tips">库存:</p>
        <input v-if="pet.number==0" style="color: red" class="input" v-model=pet.number disabled="true"/>
        <input v-else class="input" v-model=pet.number disabled="true"/>
      </div>
    </div>
    <div class="btnBox">
      <el-input-number
        size="small"
        controls-position="right"
        v-model="PutCartNumber"
        :min="pet.number<1?0:1"
        :max="pet.number"></el-input-number>
      <el-button type="primary" size="large" plain :disabled="pet.number==0" @click="PutToCart">加入购物车</el-button>
      <el-button type="success" size="large" plain :disabled="pageFrom==1" @click="PutToFavorite">加入收藏</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProductDetail",
  inject:['reload'],
  data() {
    return {
      pet:{},
      promptBoxInfo:"",
      promptBoxColor:'',
      promptBoxShow:false,
      pageFrom:0,//1代表从收藏页面跳转
      returnTo:'',
      PutCartNumber:0
    }
  },
  methods: {
      PutToCart(){
        var params={
          user_id:JSON.parse(localStorage.getItem("user")).id,
          animal_id:this.pet.id,
          number:this.PutCartNumber
        }
        this.$axios
            .post(`${this.$target}/cart/save`,JSON.stringify(params),{
              headers: {
                'Content-Type': 'application/json;charset=UTF-8'
              }
            })
            .then(res=>{
              if(res.data.status==0){
                this.showSuccess("添加购物车成功!")
              }else{
                this.showError("添加失败!")
              }
            })
      },
      PutToFavorite(){
        this.$axios
            .post(`${this.$target}/collect/save?user_id=`+JSON.parse(localStorage.getItem("user")).id+`&animal_id=`+this.pet.id)
            .then(res=>{
              if(res.data.status==0){
                this.showSuccess("添加收藏成功!")
              }else{
                this.showError("添加失败!")
              }
            })
      },
      back(){
        if(this.pageFrom<=6){
          this.$router.push({path:"/personal",query:{from:this.pageFrom}})
          this.reload()
        }else if(this.pageFrom==7){
          this.$router.push({path:"/",query:{from:this.pageFrom}})
        }else if(this.pageFrom==8){
          this.$router.push({path:"/goods",query:{from:this.pageFrom}})
        }
      },
      showSuccess(text){
        this.promptBoxInfo=text
        this.promptBoxColor='#45cb45'
        this.promptBoxShow=true
        setTimeout(()=>{//用箭头函数保证this指向vue实例
          this.promptBoxShow=false
        }, 1000)
      },
      showError(text){
        this.promptBoxInfo=text
        this.promptBoxColor='#e12a2a'
        this.promptBoxShow=true
        setTimeout(()=>{
          this.promptBoxShow=false
        }, 1000)
      }

  },
  mounted() {
    this.pet = JSON.parse(this.$route.query.pet)
    this.$axios
        .get(`${this.$target}/animal/` + this.pet.id)
        .then(res => {
          this.pageFrom = this.pet.fromPage
          this.pet = res.data.data
        })
    this.PutCartNumber = this.pet.number < 1 ? 0 : 1

    if(this.pet.id != undefined){
      let formData = {
        user_id:JSON.parse(localStorage.getItem("user")).id,
        animal_id:this.pet.id
      }
      /*生成历史记录*/
      this.$axios
          .post(`${this.$target}/history/save`,JSON.stringify(formData),{
            headers: {
              'Content-Type': 'application/json;charset=UTF-8'
            }
          })
          .then(res=>{

          })
    }

  }
}
</script>

<style src="@/assets/css/product_detail.css" scoped>
</style>
